import React, { Component } from 'react';
import {
  AutoComplete,
  TreeSelect,
  Radio,
  Cascader,
  Card,
  Button,
  Form,
  Icon,
  Col,
  Row,
  DatePicker,
  TimePicker,
  Input,
  Select,
  Popover,
  Switch,
} from 'antd';
import BaseTool from '../../common/Base.tool';

const { genTree, hasTreeNodes } = BaseTool;

const { Option } = Select;
const valueOf = (value, candidateValues) => {
  if (value && value.length != 0) {
    return value;
  }

  if (candidateValues.length == 1) {
    return candidateValues[0].id;
  }
  return null;
};

export default class CandidateList extends React.Component {
  state = {
    candidateValues: [],
  };

  executeSearch = filterKey => {
    // const {value,disabled,useForSearch,targetType,groupBy,scenarioCode,ownerType,ownerId} = this.props

    const {
      requestFunction,
      ownerType,
      ownerId,
      listType,
      targetType,
      groupBy,
      scenarioCode,
    } = this.props;
    const requestData = {
      ownerType,
      ownerId,
      listType,
      targetType,
      groupBy,
      scenarioCode,
      filterKey,
    };
    const future = requestFunction(requestData);
    console.log(requestData);

    future.then(data => {
      const candidateValues = data;
      if (this._isMounted) {
        const value = valueOf(this.props.value, candidateValues);
        const onChange = this.props.onChange;
        if (onChange) {
          onChange(value);
        }
        this.setState({
          candidateValues,
          value,
        });
      }
    });
  };
  handleSearch = value => {
    this.executeSearch(value);
  };

  componentDidMount() {
    this._isMounted = true;
    this.executeSearch('');
  }
  componentWillUnmount() {
    this._isMounted = false;
  }
  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if (!this._isMounted) {
      return;
    }
    if ('value' in nextProps) {
      const value = nextProps.value;

      this.setState({ value });
    }
  }

  handleChange = currentValue => {
    if (!this._isMounted) {
      return;
    }

    console.log('current value', currentValue);
    const value = currentValue;

    if (!('value' in this.props)) {
      this.setState({ value });
    }

    const onChange = this.props.onChange;
    if (onChange) {
      onChange(value);
    }
  };

  /*
<CandidateList 
                 disabled={!availableForEdit('status')}
                 targetType={"status"} 
                 groupBy={"group_name"}
                 scenarioCode={"search"}
                 ownerType={"platform"}
                 ownerId={"P000001"}
                 
                 requestFunction={DataAppUserService.queryCandidatesForSearch} useForSearch />
               	
*/
  render() {
    const { candidateValues, placeholder } = this.state;
    const {
      id,
      value,
      disabled,
      useForSearch,
      targetType,
      groupBy,
      scenarioCode,
      ownerType,
      ownerId,
    } = this.props;

    const finalPlaceholder = placeholder || '请选择列表中或者输入搜索';
    if (!candidateValues) {
      return <div>正在载入候选项......</div>;
    }

    if (candidateValues.length <= 10) {
      return (
        <Radio.Group value={value} onChange={v => this.handleChange(v)}>
          {candidateValues.map(item => (
            <Radio value={item.id}>{item.name}</Radio>
          ))}
        </Radio.Group>
      );
    }

    const calcSize = () => {
      if (useForSearch) {
        return 'default';
      }
      return 'large';
    };

    if (hasTreeNodes(candidateValues)) {
      // TreeSelect <Cascader options={options} onChange={onChange}
      // Cascader 还是不正常传递回去一个数组，
      return (
        <TreeSelect
          style={{ width: '100%' }}
          value={valueOf(value, candidateValues)}
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          treeData={genTree(candidateValues, '')}
          options={genTree(candidateValues, '')}
          placeholder={finalPlaceholder}
          treeDefaultExpandAll
          size={calcSize()}
          onChange={v => this.handleChange(v)}
        />
      );
    }

    return (
      <AutoComplete
        value={valueOf(value, candidateValues)}
        size={calcSize()}
        dataSource={candidateValues.map(item => {
          return <Option key={item.id}>{`${item.name}(${item.id})`}</Option>;
        })}
        onSearch={this.handleSearch}
        placeholder={finalPlaceholder}
        disabled={disabled}
        onChange={value => this.handleChange(value)}
        // eslint-disable-next-line react/react-in-jsx-scope
        suffix={<Icon type="search" />}
      >
        <Input suffix={<Icon type="bars" id={`${id}-icon`} />} />
      </AutoComplete>
    );
  }
}
